<template>
  <div>
    <section class="wrap">
      <header class="header">
        <h2 class="title">员工信息管理</h2>
        <a href="javascript:;" class="addBtn" @click="jia">添加</a>
      </header>
      <form class="add" v-if="chu">
        <input type="text" class="name" placeholder="姓名" v-model="people" />
        <label class="genderWrap">
          <input type="checkbox" class="gender" v-model="gender" />
          <div class="genderIco">
            <div class="genderInner"><span>男</span><span>女</span></div>
          </div>
        </label>
        <input
          type="number"
          class="age"
          placeholder="年龄"
          step="1"
          min="18"
          max="80"
          v-model="bir"
        />
        <label class="stateWrap">
          <input type="checkbox" class="state" v-model="work" />
          <div class="stateIco">
            <div class="stateInner"><span>在职</span><span>离职</span></div>
          </div>
        </label>
        <button type="button" class="submit" @click="luru">录入信息</button>
      </form>
      <nav class="nav">
        <a href="javascript:;">所有员工信息</a>
        <a href="javascript:;">女员工信息</a>
        <a href="javascript:;">男员工信息</a>
        <a href="javascript:;">在职员工信息</a>
        <a href="javascript:;">离职员工信息</a>
      </nav>
      <ul class="list">
        <li>
          <span
            ><input type="checkbox" v-model="quanxuan" @change="quan"
          /></span>
          <span>姓名</span> <span>性别</span> <span>年龄</span> <span>在职</span
          ><span>操作</span>
        </li>
        <li v-for="(i, index) in arr" :key="index">
          <span><input type="checkbox" v-model="i.check" @change="dan" /></span>
          <span>{{ i.name }}</span>
          <span>{{ i.gender }}</span>
          <span>{{ i.age }}</span>
          <span>{{ i.state }}</span>
          <span @click="del(index)">删除</span>
        </li>
      </ul>
      <p class="operate">
        <a href="javascript:;" class="delSelect" @click="changedel"
          >删除选中项</a
        >
        <a href="javascript:;" class="stateSelect" @click="zaizhi"
          >入职选中项</a
        >
        <a href="javascript:;" @click="lizhi">离职选中项</a>
      </p>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        { name: "小帅", gender: "男", age: 20, state: "离职", check: false },
        { name: "小王", gender: "男", age: 20, state: "离职", check: false },
      ],
      chu: false,
      people: "",
      gender: "",
      bir: "",
      work: "",
      dandan: "",
      quanxuan: false,
    };
  },
  watch: {
    arr() {
      //数据名称
      console.log(this.arr);
      deep; //深度监听
    },
  },
  methods: {
    jia() {
      if (this.chu == false) {
        this.chu = true;
      } else {
        this.chu = false;
      }
    },
    luru() {
      this.arr.push({
        name: this.people,
        gender: this.gender ? "女" : "男",
        age: this.bir,
        state: this.work ? "离职" : "在职",
        check: false,
      }),
        (this.chu = false),
        (this.people = ""),
        (this.gender = ""),
        (this.bir = ""),
        (this.work = "");
    },
    del(index) {
      this.arr.splice(index, 1);
    },
    quan() {
      this.arr.forEach((item) => {
        item.check = this.quanxuan;
      });
    },
    dan() {
      // this.quanxuan = this.arr.every((item) => item.check);
      var bool = true;
      this.arr.forEach((item) => {
        if (item.check == false) {
          bool = false;
        }
      });
      this.quanxuan = bool;
    },
    changedel() {
      this.arr = this.arr.filter((item) => {
        return item.check == false;
      });
    },
    zaizhi() {
      this.arr.forEach((item) => {
        if (item.state == "在职") {
          if (item.check == false) {
            item.check = true;
          } else {
            item.check = false;
          }
        } else {
          item.check = false;
        }
      });
    },
    lizhi() {
      this.arr.forEach((item) => {
        if (item.state == "离职") {
          if (item.check == false) {
            item.check = true;
          } else {
            item.check = false;
          }
        } else {
          item.check = false;
        }
      });
    },
  },
};
</script>
<style lang='css'>
h2 {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  position: relative;
  width: 600px;
  margin: 30px auto;
  font: 12px "宋体";
}

.addBtn {
  position: absolute;
  right: 0;
  top: 0;
}

input {
  margin: 0;
}

a {
  color: #337ab7;
  text-decoration: none;
}

a:hover {
  color: #23527c;
}

a.selected {
  color: #ccc;
}

.header {
  border-bottom: 2px solid #666;
}

.title {
  text-align: center;
  font: 14px/32px "宋体";
}

.nav {
  display: flex;
  font: 12px/26px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
}

.add {
  display: flex;
  height: 40px;
  align-items: center;
  font: 12px/24px "宋体";
  justify-content: space-between;
  border-bottom: 2px solid #666;
}

.name,
.age,
.submit {
  width: 80px;
  text-align: center;
  height: 24px;
  padding: 0;
  border: 1px solid #ccc;
}

.genderWrap,
.stateWrap {
  width: 44px;
  padding: 1px;
  border: 1px solid #ccc;
}

.stateWrap {
  width: 88px;
}

.gender,
.state {
  display: none;
}

.genderIco,
.stateIco {
  width: 22px;
  height: 22px;
  background: #666;
  overflow: hidden;
  transition: 0.3s;
}

.stateIco {
  width: 44px;
}

.genderInner,
.stateInner {
  transition: 0.3s;
  display: flex;
  width: 44px;
  font: 12px/22px "宋体";
  color: #fff;
}

.stateInner {
  width: 88px;
}

.genderInner span,
.stateInner span {
  margin: auto;
}

.gender:checked ~ .genderIco {
  margin-left: 22px;
}

.gender:checked ~ .genderIco .genderInner {
  margin-left: -22px;
}

.state:checked ~ .stateIco {
  margin-left: 44px;
}

.state:checked ~ .stateIco .stateInner {
  margin-left: -44px;
}

.list {
  margin: 0 auto;
  width: 90%;
}

.list li {
  display: flex;
  font: 12px/24px "宋体";
  border-bottom: 1px solid #ccc;
}

.list span {
  display: block;
  margin: 0 auto;
  flex: 1;
  text-align: center;
}

.list li span:nth-of-type(1) {
  width: 40px;
  flex: none;
}

.operate {
  display: flex;
  justify-content: space-around;
  font: 12px/24px "宋体";
  border-top: 2px solid #000;
}
</style>



